<template>
  <div class="fuse">
    <div class="fuse-left-side">
      <div class="border fuse-side_middle">
        <div class="fuse-title">隐患分析统计</div>
        <div class="fuse-main">
          <div id="data1" style="height: 2.3rem"></div>
        </div>
      </div>
      <div class="border" style="height: 2.2rem; margin-bottom: 0.15rem">
        <div class="fuse-title">应急预案</div>
        <div class="fuse-main">
          <ul class="yjplan">
            <li v-for="(item, index) in planlist" :key="index">
              <p>{{ item.dictLable }}</p>
              <p>{{ item.sum }}个</p>
              <img :src="item.src" alt="" />
            </li>
          </ul>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          风险类型统计
          <!-- <i class="iconfont">&#xe66e;</i> -->
        </div>
        <div class="fuse-main" style="margin-bottom: 0.2rem">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="riskList" class="backtable">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name1"
                label="风险名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="name2"
                label="辨识对象"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="name3"
                label="风险类型"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="name4"
                label="识别时间"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
    </div>
    <div class="fuse-right-side">
      <div class="border fuse-side_middle">
        <div class="fuse-title">应急资源统计</div>
        <div class="fuse-main" style="margin-bottom: 0.2rem">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="resourcesList" class="backtable">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="dictLable"
                label="物资类型"
                show-overflow-tooltip
                width="180"
              >
                <template slot-scope="scope">
                  <img
                    src="../../../assets/images/yellow.png"
                    alt=""
                    style="width: 0.25rem; height: 0.25rem"
                  />
                  <span style="vertical-align: super">{{
                    scope.row.dictLable
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="sum"
                label="个数"
                show-overflow-tooltip
                width="180"
              >
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
        <!-- <div class="fuse-main">
          <ul class="resources">
            <li>
              <div>
                <img src="../../../assets/images/spjk.png" alt="" />
                <span>视频监控</span>
              </div>
              <div>
                <span>20</span>
                <span>个</span>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../assets/images/bncs.png" alt="" />
                <span>避难场所</span>
              </div>
              <div>
                <span>20</span>
                <span>个</span>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../assets/images/yjjydw.png" alt="" />
                <span>救援队伍</span>
              </div>
              <div>
                <span>20</span>
                <span>个</span>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../assets/images/tx.png" alt="" />
                <span>应急通讯</span>
              </div>
              <div>
                <span>20</span>
                <span>个</span>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../assets/images/jy.png" alt="" />
                <span>救援器材</span>
              </div>
              <div>
                <span>20</span>
                <span>个</span>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../assets/images/jszb.png" alt="" />
                <span>技术装备</span>
              </div>
              <div>
                <span>20</span>
                <span>个</span>
              </div>
            </li>
          </ul>
        </div> -->
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">联动报警趋势</div>
        <div class="fuse-main">
          <div id="data2" style="height: 2.3rem; margin-left: 0.2rem"></div>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          隐患类型统计
          <!-- <i class="iconfont">&#xe66e;</i> -->
        </div>
        <div class="fuse-main" style="margin-bottom: 0.2rem">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="dangertypeList" class="backtable">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name1"
                label="隐患描述"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="name2"
                label="隐患类型"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="name3"
                label="隐患等级"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="name4"
                label="识别时间"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { HappyScroll } from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'
import * as echarts from 'echarts'
export default {
  components: {
    HappyScroll
  },
  data() {
    return {
      riskList: [],
      dangertypeList: [],
      planlist: [],
      resourcesList: []
    }
  },
  mounted() {
    this.getdata1()
    this.getriskdata()
    this.getdangertype()
    this.getdata2()
    this.getresourcesdata()
    this.getPlandata()
  },
  methods: {
    // 应急资源统计
    getresourcesdata() {
      this.$http
        .get('/emergency/sysEmergencyInfo/equipmentTypeInfo')
        .then(res => {
          if (res.code === 200) {
            this.resourcesList = res.data
          }
        })
    },
    // 应急预案
    getPlandata() {
      this.$http
        .get('/emergency/sysEmergencyPlanInfo/reserveInfo')
        .then(res => {
          if (res.code === 200) {
            this.planlist = res.data
            this.planlist.forEach(item => {
              this.$set(item, 'src', '')
              if (item.dictLable == '综合预案') {
                item.src = require('../../../assets/images/plan.png')
              } else if (item.dictLable == '专项预案') {
                item.src = require('../../../assets/images/zhuanxiang.png')
              } else if (item.dictLable == '处置方案') {
                item.src = require('../../../assets/images/chuzhi.png')
              }
            })
          }
        })
    },
    // 隐患类型统计
    getdangertype() {
      // this.$http
      //   .get('/emergency/sysEmergencyInfo/getMaterialStatistics')
      //   .then(res => {
      //     if (res.code === 200) {
      this.dangertypeList.push(
        {
          name1: '火灾隐患',
          name2: '安全隐患',
          name3: '重大',
          name4: '2022-06-30'
        },
        {
          name1: '运输隐患',
          name2: '运输隐患',
          name3: '较大',
          name4: '2022-06-29'
        },
        {
          name1: '坍塌隐患',
          name2: '安全隐患',
          name3: '较低',
          name4: '2022-05-12'
        },
        {
          name1: '运输隐患',
          name2: '运输隐患',
          name3: '较大',
          name4: '2022-5-28'
        },
        {
          name1: '坍塌隐患',
          name2: '安全隐患',
          name3: '较低',
          name4: '2022-05-12'
        },
        {
          name1: '运输隐患',
          name2: '运输隐患',
          name3: '较大',
          name4: '2022-5-28'
        }
      )
      //     }
      //   })
    },
    // 风险类型统计
    getriskdata() {
      // this.$http
      //   .get('/emergency/sysEmergencyInfo/getMaterialStatistics')
      //   .then(res => {
      //     if (res.code === 200) {
      this.riskList.push(
        {
          name1: '运输',
          name2: '作业环境',
          name3: '重大风险',
          name4: '2022-06-30'
        },
        {
          name1: '火灾',
          name2: '作业活动',
          name3: '较大风险',
          name4: '2022-06-29'
        },
        {
          name1: '坍塌',
          name2: '作业环境',
          name3: '较低风险',
          name4: '2022-05-12'
        },
        {
          name1: '运输',
          name2: '作业活动',
          name3: '较大风险',
          name4: '2022-5-28'
        },
        {
          name1: '火灾',
          name2: '作业活动',
          name3: '较大风险',
          name4: '2022-06-29'
        },
        {
          name1: '坍塌',
          name2: '作业环境',
          name3: '较低风险',
          name4: '2022-05-12'
        },
        {
          name1: '运输',
          name2: '作业活动',
          name3: '较大风险',
          name4: '2022-5-28'
        }
      )
      //     }
      //   })
    },
    // 联动报警趋势
    getdata2() {
      this.$http.get('/safe/safe_transducer_alarm').then(res => {
        if (res.code === 200) {
          var chart2 = echarts.init(document.getElementById('data2'))
          var option2 = {
            backgroundColor: '#080b3000',
            title: [
              {
                text: '',
                textStyle: {
                  align: 'center',
                  color: '#fff',
                  fontSize: 20
                },
                top: '5%',
                x: '30%'
              }
            ],
            tooltip: {
              trigger: 'axis',
              // axisPointer: {
              //   type: 'line',
              //   lineStyle: {
              //     opacity: 0
              //   }
              // },
              formatter: function(prams) {
                return (
                  prams[0].name +
                  '\n' +
                  '\n' +
                  '报警数量：' +
                  prams[0].value +
                  '个'
                )
              }
            },
            grid: {
              top: '15%',
              width: '75%',
              height: '60%',
              // left: '5%',
              // right: '5%',
              bottom: '15%'
            },
            legend: {
              show: true,
              top: '10%',
              left: '50%',
              icon: 'circle',
              textStyle: {
                color: '#d4e3e6'
              }
            },
            xAxis: [
              {
                type: 'category',
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#00c7ff',
                    width: 1,
                    type: 'solid'
                  }
                },
                axisTick: {
                  show: true
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#00c7ff'
                  }
                },
                boundaryGap: false,
                data: res.data.time
              }
            ],
            yAxis: [
              {
                type: 'value',
                min: 0,
                max: 100,
                name: '次',
                nameTextStyle: {
                  color: '#d2d2d2',
                  fontSize: 14,
                  padding: [0, 0, 20, -50]
                },
                splitNumber: 5,
                axisLabel: {
                  margin: 20,
                  textStyle: {
                    color: '#00c7ff'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#00c7ff',
                    width: 1,
                    type: 'solid'
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: '#0F55B9'
                  }
                }
              }
            ],
            series: [
              {
                name: '',
                type: 'line',
                // symbol: 'none',  //取消折点圆圈
                smooth: 'false',
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 6,
                itemStyle: {
                  color: '#12d6e7',
                  borderColor: '#fff',
                  borderWidth: 2
                },
                lineStyle: {
                  width: 4,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#032648'
                    },
                    {
                      offset: 1,
                      color: '#12d6e7'
                    }
                  ]),
                  shadowColor: '#12d6e7',
                  shadowBlur: 15
                },
                // tooltip: {
                //   show: false
                // },
                data: res.data.val
              }
            ]
          }

          chart2.setOption(option2)
        }
      })
    },
    // 隐患分析统计
    getdata1() {
      // this.$http
      //   .get('/emergency/sysEmergencyInfo/getMaterialStatistics')
      //   .then(res => {
      //     if (res.code === 200) {
      var chart1 = echarts.init(document.getElementById('data1'))
      var gain = 0.9
      var gap = 0
      var myColor = ['#e63810', '#13b5b1', '#ff6b00', '#e3b61f']
      var myBgColor = [
        'rgba(230,56,16,0.2)',
        'rgba(19,181,177,0.2)',
        'rgba(255,107,0,0.2)',
        'rgba(227,182,31,0.2)'
      ]
      // 柱子数据
      var data = [8, 15]
      var option1 = {
        backgroundColor: 'rgba(0,0,0,0)',
        grid: {
          left: '3%',
          top: '15%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              opacity: 0
            }
          },
          formatter: function(prams) {
            return (
              prams[0].name + '\n' + '\n' + '数量：' + prams[0].value + '个'
            )
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#00c7ff',
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#00c7ff'
              }
            },
            data: ['重大隐患', '一般隐患']
          },
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: []
          }
        ],
        yAxis: {
          type: 'value',
          name: '单位：个',
          nameGap: 35 + gap,
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 16 * gain
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#0F55B9'
            }
          }
        },
        series: [
          {
            type: 'bar',
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                show: true,
                color: function(params) {
                  var num = myBgColor.length
                  return myBgColor[params.dataIndex % num]
                },
                barBorderRadius: 50,
                borderWidth: 0,
                borderColor: '#333'
              }
            },
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  var stuNum = 0
                  data.forEach(function(value, index, array) {
                    if (params.dataIndex == index) {
                      stuNum = value
                    }
                  })
                  return stuNum
                }
              }
            },
            barWidth: '10%',
            data: data
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: function(params) {
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                },
                barBorderRadius: 50,
                borderWidth: 0,
                borderColor: '#333'
              }
            },
            label: {
              normal: {
                show: false
              }
            },
            barWidth: '10%',
            data: data
          }
        ]
      }
      chart1.setOption(option1)
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.yjplan {
  display: flex;
  justify-content: space-evenly;
  margin-top: 0.2rem;
  li {
    width: 1.05rem;
    height: 1.05rem;
    background: url('../../../assets/images/plankuang.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding-top: 0.15rem;
    p {
      margin-bottom: 0.03rem;
    }
    p:nth-child(1) {
      color: #00f6ff;
      font-size: 0.16rem;
    }
    p:nth-child(2) {
      margin: 0.07rem 0;
    }
    img {
      width: 0.3rem;
      height: 0.28rem;
    }
  }
}
.resources {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.15rem;
  margin-left: 0.2rem;
  li {
    width: 30%;
    height: 1rem;
    // background: rgb(231, 52, 85);
    div:nth-child(1) {
      text-align: center;
      img {
        width: 0.25rem;
        height: 0.25rem;
      }
      span {
        vertical-align: super;
        margin-left: 0.05rem;
      }
    }
    div:nth-child(2) {
      width: 100%;
      height: 0.45rem;
      background: url('../../../assets/images/ziyuan.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 0.45rem;
      margin-top: 0.1rem;
    }
  }
}
</style>